<template>
  <div class="reco-container" @mouseenter="stop" @mouseleave="start" :style="`background: ${background}`">
    <span class="last" @click="last">&lt;</span>
    <span class="next" @click="next">&gt;</span>
    <div class="banner con">
      <ul class="banner-list">
        <li v-for="item in list" :key="item.id">
          <transition name="fade">
            <img :src="item.imgSrc" alt="图片" v-show="item.id === currentIndex">
          </transition>
        </li>
      </ul>
      <ol>
        <li @click="currentIndex = item.id" :class=" { nowbanner: item.id == currentIndex } " v-for="item in clickList"
          :key="item.id"></li>
      </ol>
      <div class="download-cloud"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'recommend',
  data() {
    return {
      list: [
        { id: 0, imgSrc: require('../assets/banner/banner9.jpg') },
        { id: 1, imgSrc: require('../assets/banner/banner1.jpg') },
        { id: 2, imgSrc: require('../assets/banner/banner2.jpg') },
        { id: 3, imgSrc: require('../assets/banner/banner3.jpg') },
        { id: 4, imgSrc: require('../assets/banner/banner4.jpg') },
        { id: 5, imgSrc: require('../assets/banner/banner5.jpg') },
        { id: 6, imgSrc: require('../assets/banner/banner6.jpg') },
        { id: 7, imgSrc: require('../assets/banner/banner7.jpg') }
      ], // 轮播图列表
      clickList: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }], // 切换banner的小圆点
      currentIndex: 0, // 控制轮播图的切换
      background: '#f78279'
    }
  },
  watch: {
    // 监听 currentIndex
    currentIndex(newVal, oldVal) {
      if (newVal == this.list.length) {
        this.currentIndex = 0
      }
      //  背景色
      switch (newVal) {
        case 0:
          this.background = '#f78279'
          break
        case 1:
          this.background = '#c5dfee'
          break
        case 2:
          this.background = '#4f6161'
          break
        case 3:
          this.background = '#111621'
          break
        case 4:
          this.background = '#eec8a4'
          break
        case 5:
          this.background = '#96959b'
          break
        case 6:
          this.background = '#131512'
          break
        case 7:
          this.background = '#28231f'
          break
      }
    }
  },
  methods: {
    // 启动定时器
    start() {
      this.timer = setInterval(() => {
        this.currentIndex++
      }, 2000)
    },
    // 停止定时器
    stop() {
      clearInterval(this.timer)
    },
    // 上一张
    last() {
      if (this.currentIndex === 0) {
        this.currentIndex = 7
      } else {
        this.currentIndex -= 1
      }
    },
    // 下一张
    next() {
      if (this.currentIndex === 7) {
        this.currentIndex = 0
      } else {
        this.currentIndex += 1
      }
    }
  },
  mounted() {
    // 开启定时器
    this.start()
  }
}
</script>

<style lang="less" scoped>
@import '../assets/base.less';
.reco-container {
  position: relative;
  // background-color: @red;
  .last,
  .next {
    position: absolute;
    height: 70px;
    width: 45px;
    top: 50%;
    margin-top: -35px;
    color: #f1ede5;
    cursor: pointer;
    line-height: 60px;
    font-size: 60px;
    &:hover {
      background: rgba(0, 0, 0, 0.2);
    }
  }
  .last {
    left: 200px;
  }
  .next {
    right: 200px;
  }
  .banner {
    position: relative;
    height: 285px;
    cursor: pointer;
    ol {
      width: 200px;
      position: absolute;
      right: 511px;
      bottom: 10px;
      z-index: 999;
      display: flex;
      justify-content: space-between;
      li {
        background-color: #f6e9d9;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        &:hover {
          background-color: @red;
        }
      }
      .nowbanner {
        background-color: @red;
      }
    }
    .banner-list {
      float: left;
      height: 100%;
      width: 74%;
      position: relative;
      li {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        img {
          width: 100%;
          height: 100%;
          transition: 0.3s;
        }
      }
    }
    .download-cloud {
      float: right;
      width: 26%;
      height: 100%;
      background: url(../assets/download.png) 1px 0;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0.7;
}
.fade-enter-to,
.fade-leave {
  opacity: 0.5;
}
</style>